<template>
      <div style="padding-top:5px;width:100%;padding-right:15px;">
            <div>
                  <div style="float:right;width:180px;">
                        <div class="input-group">
                        <input type="text" class="form-control input-sm" placeholder="お気に入りに保存" v-model="collectionName">
                        <span class="input-group-btn">
                              <button class="btn btn-sm btn-default" type="button" @click="addCollect">追加</button>
                        </span>
                  </div>
                  </div>
                  <div style="float:right;margin-right:10px;">
                        <div><button class="btn btn-success" @click="downloadMth" :disabled="downloadBtnStatu">EXCEL出力</button></div>
                  </div>
                  <cusgroup style="float:right;" :companyValue="$attrs.companyValue"></cusgroup>
                  <div style="float:right;margin-right:10px;">
                        <button type="button" class="btn btn-primary" style=" margin-left:10px;" :disabled="downloadBtnStatu" @click="showAddGroupModal">顧客グループへ登録</button>
                  </div>
                  <ul class="nav nav-tabs" role="tablist" id="tabArrayUl">
                        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">グラフ</a></li>
                        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">期間</a></li>
                        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">対比期間</a></li>
                  </ul>
            </div>
            <div>
                  <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="home">
                              <chartsComponent v-show="isShowChart"></chartsComponent>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="profile">
                              <tab1Component :result="result.tbl" ref="tab2"></tab1Component>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="messages">
                              <tab1Component :result="result.tbl2" ref="tab3"></tab1Component>
                        </div>
                  </div>
            </div>
            <div class="modal fade" id="addGroupModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
            <div class="modal-dialog" role="document">
                  <div class="modal-content">
                        <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                              <h4 class="modal-title">クロス顧客グループ名指定</h4>
                        </div>
                        <div class="modal-body">
                              <div class="form-group form-inline">
                                    <label for="gpName">クロス顧客グループ名指定:</label>
                                    <input type="text" class="form-control" style="margin-left: 5px;width:350px;" maxlength="50" v-model="groupName">
                                    <label style="padding-left:180px;">※最大50文字を入力してください</label>
                              </div>
                        </div>
                        <div class="modal-footer">
                              <button type="button" class="btn btn-default" data-dismiss="modal" >キャンセル</button>
                              <button type="button" class="btn btn-primary">確定</button>
                        </div>
                        </div>
                  </div>
            </div>
            <iframe id="my_iframe" style="display:none;"></iframe>
      </div>
</template>

<script>
import chartsComponent from '@/components/echarts.vue';
import tab1Component from './datatable1.vue';
import cusgroup from '../../components/sys_cusgroup';
export default {
      components:{
            chartsComponent,
            tab1Component,
            cusgroup
      },
      data:function(){
            return {
                  collectionName:'',
                  url:{
                        getDownloadFileName:'/suntorylink/crossabc/CGI/CROSSABC.GET_DATA_CSV.CGI',
                        downloadFile:'/suntorylink/crossabc/CGI/CROSSABC.GET_DATA_DOWNLOAD.CGI',
                        getCustomerGroupIdUrl:'/suntorylink/api/groups/',
                        addCustomerGroupUrl:'/suntorylink/crossabc/CGI/CROSSABC.SAVE_KOKYAKUGROUP.CGI'
                  },
                  groupName:'',
                  tableFlg:1,
                  isShowChart:true
            };
      },
      props:{
            param:{
                  type:Object
            },
            result:{
                  type:Object
            }
      },
      computed:{
            downloadBtnStatu(){
                  if(JSON.stringify(this.result) !== '{}'){
                        return false;
                  }
                  return true;
            }
      },
      methods:{
            //添加收藏
            addCollect(){
                  if(this.collectionName !== undefined && this.collectionName.toString().trim() !== '' ){
                        this.$emit('addCollectMth',this.collectionName);
                  }
            },
            changeCollectName(name){
                  this.collectionName = name;
            },
            //下载
            downloadMth(){
                  var downloadGuid = this.$utils.getGuid();
                  window.requestStart();
                  var param = {
                        guidCSV: downloadGuid,
                        guidSearch:this.param.guid
                  };
                  var vm  = this;
                  this.$http.post(vm.url.getDownloadFileName,param).then(function(response){
                        vm.downLoadExcel(vm.url.downloadFile+'?guid='+downloadGuid+'&zipfile='+response.data.trim());
                        window.cancel();
                  });
            },
            downLoadExcel(name){
                  document.getElementById('my_iframe').src = name;
            },
            showAddGroupModal(){
                  if(JSON.stringify(this.result) !== '{}' && window.$('#tabArrayUl .active')[0].innerText !== 'グラフ'){
                        this.groupName = '';
                        window.$('#addGroupModal').modal('show');
                  }else{
                        global.msg_instance.showMsgNew({
                              title : 'CROSSABC_002'
                        });
                  }
            },
            addGroup(){
                  var customerParam={
                        'clsName':this.groupName,
                        'userCd':global.userCd,
                        'kigyoCd':this.param.kigyo,
                        'system':global.systemCd,
                        'groupType':1,
                        'cusNum':0,
                        'content':'',
                        'groups':[]
                  };
                  var key = window.$('#tabArrayUl .active')[0].innerText === '期間'?'tbl':'tbl2';
                  this.tableFlg = key === 'tbl'?1:2;
                  for (var index = 0; index < this.result[key].length; index++) {
                        customerParam.groups.push({groupName:this.result[key][index][0]});
                        
                  }
                  var vm = this;
                  this.$http.post(this.url.getCustomerGroupIdUrl,customerParam)
                  .then(function(response){
                        if(response.data.status === 0){
                              customerParam= response.data.data;
                              //正常保存
                              vm.insertCustomerGroup(customerParam);
                        }else{
                              //做成失败
                              global.msg_instance.showMsgNew({
                                    title : 'COMMON_012'
                              });
                        }
                  });
                  window.$('#addGroupModal').modal('hide');
            },
            insertCustomerGroup(customerParam){
                  var idArry = [customerParam.clsCd];
                  for (var index = 0; index < customerParam.groups.length; index++) {
                        idArry.push(customerParam.groups[index].groupCd);
                  }
                  var vm = this;
                  this.$http.post(this.url.addCustomerGroupUrl,{
                        usercd: global.userCd,
                        groupname: idArry.join(','),
                        kigyo:this.param.kigyo,
                        tbl_flag: this.tableFlg,
                        oldGuid: this.param.guid,
                        guid:this.$utils.getGuid()
                  },{timeout:6000}).then(function(response){
                        if(response.data.toString().trim() === '1'){
                              //做成失败
                              global.msg_instance.showMsgNew({
                                    title : 'COMMON_012'
                              });
                        }else if(response.data.toString().trim() === '2'){
                              //没有值
                              global.msg_instance.showMsgNew({
                                    title : 'COMMON_018'
                              });
                        }else{
                              //success
                              vm.updateCustomerGroupNum(customerParam,response.data);
                              global.msg_instance.showMsgNew({
                                    title : 'COMMON_026'
                              });
                        }
                  });
            },
            updateCustomerGroupNum(customerParam,response){
                  var param = {
                        cusNum:Number.parseInt(response[customerParam.clsCd]),
                        groups:[]
                  };
                  for (var key in customerParam.groups) {
                        var num = response[customerParam.groups[key].groupCd];
                        var group = {};
                        group.groupCd = customerParam.groups[key].groupCd;
                        group.cusNum = Number.parseInt(num === undefined ? 0: num);
                        param.groups.push(group);
                  }
                  this.$http.put(this.url.getCustomerGroupIdUrl + customerParam.clsCd + '/',param);
            },
            resetTab(){
                  window.$('#tabArrayUl a:first').tab('show');
            },
            showChart(){
                  this.isShowChart = true
            },
            hideChart(){
                  this.isShowChart = true
            }
      },
      mounted(){
            var vm = this;
            window.$('a[data-toggle="tab"]').on('shown.bs.tab', function () {
                  vm.$parent.resetChartsSize();
            });
      }
};
</script>
<style scoped>
label{
      font-weight: 100;
}
</style>